<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" style="padding-left:10px; padding-bottom:10px; font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公司员工管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 主内容卡片 -->
    <el-card>
      <!-- 页面头部 -->
      <el-page-header @back="goBack" content="员工列表"></el-page-header>

      <!-- 条件查询区 -->
      <el-form :inline="true" ref="form" size="small" style="margin-top: 2vh">
        <el-row>
          <h4 style="margin: 1vh 0 2vh; color: #1f2d3d">条件查询区</h4>
        </el-row>
        <div class="query-condition">
          <!-- 员工姓名输入框 -->
          <el-form-item>
            <el-input
                v-model="queryMap.employeeName"
                clearable
                placeholder="请输入员工姓名"
            ></el-input>
          </el-form-item>
          <!-- 性别选择 -->
          <el-form-item>
            <el-select v-model="queryMap.gender" clearable placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>

          <!-- 角色选择 -->
          <el-form-item>
            <el-select v-model="queryMap.role" clearable placeholder="请选择角色">
              <el-option
                  v-for="role in roles"
                  :key="role.value"
                  :label="role.label"
                  :value="role.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 所属部门输入 -->
          <el-form-item>
            <el-input
                v-model="queryMap.department"
                clearable
                placeholder="请输入所属部门"
            ></el-input>
          </el-form-item>

          <!-- 岗位名称输入 -->
          <el-form-item>
            <el-input
                v-model="queryMap.position"
                clearable
                placeholder="请输入岗位名称"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="reset" style="background-color: #f0f0f0; color: #409EFF; border: none;">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="searchCustomer">查询</el-button>
        </el-form-item>
      </el-form>

      <!-- 操作按钮区 -->
      <div style="margin-bottom: 10px; display: flex; align-items: center;">
        <span class="hint" style="flex: 1;"></span>
        <!-- 添加员工按钮 -->
        <el-button
            type="success"
            icon="el-icon-plus"
            @click="openAddDialog"
            style="margin-right: 10px;"
        >
          添加员工
        </el-button>
        <!-- 删除选中员工按钮 -->
        <el-button
            type="danger"
            icon="el-icon-delete"
            @click="deleteSelected"
        >
          删除选中
        </el-button>
      </div>

      <!-- 员工数据表格 -->
      <el-table
          ref="multipleTable"
          :data="employeeData"
          size="small"
          @selection-change="handleSelectionChange"
          border
          style="width: 100%;"
          height="420"
      >
        <!-- 选择框 -->
        <el-table-column type="selection" width="40"></el-table-column>

        <!-- 员工编号 -->
        <el-table-column prop="employeeId" label="员工编号" width="100" fixed="left"></el-table-column>

        <!-- 员工姓名 -->
        <el-table-column prop="employeeName" label="员工姓名" width="120"></el-table-column>

        <!-- 员工账号 -->
        <el-table-column prop="account" label="员工账号" width="120"></el-table-column>

        <!-- 密码 -->
        <el-table-column prop="password" label="密码" width="120"></el-table-column>

        <!-- 电话 -->
        <el-table-column prop="phone" label="电话" width="120"></el-table-column>

        <!-- 邮箱 -->
        <el-table-column prop="email" label="邮箱" width="150"></el-table-column>

        <!-- 性别 -->
        <el-table-column prop="gender" label="性别" width="80"></el-table-column>

        <!-- 角色 -->
        <el-table-column prop="role" label="角色" width="100"></el-table-column>

        <!-- 所属部门 -->
        <el-table-column prop="department" label="所属部门" width="150"></el-table-column>

        <!-- 岗位 -->
        <el-table-column prop="position" label="岗位" width="100"></el-table-column>

        <!-- 创建时间 -->
        <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>

        <!-- 操作按钮 -->
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <div style="display: flex; justify-content: space-around;">
              <!-- 编辑按钮 -->
              <el-tooltip content="编辑" placement="top" effect="light">
                <el-button
                    circle
                    round
                    plain
                    size="small"
                    type="primary"
                    icon="el-icon-edit-outline"
                    @click="openEditDialog(scope.row)"
                ></el-button>
              </el-tooltip>

              <!-- 冻结按钮 -->
              <el-tooltip content="冻结" placement="top" effect="light">
                <el-button
                    circle
                    round
                    plain
                    icon="el-icon-turn-off"
                    type="warning"
                    size="small"
                    @click="freezeEmployee(scope.row)"
                ></el-button>
              </el-tooltip>

              <!-- 删除按钮 -->
              <el-tooltip content="删除" placement="top" effect="light">
                <el-button
                    circle
                    round
                    plain
                    icon="el-icon-delete"
                    type="danger"
                    size="small"
                    @click="deleteEmployee(scope.row)"
                ></el-button>
              </el-tooltip>

              <!-- 解冻按钮 -->
              <el-tooltip content="解冻" placement="top" effect="light">
                <el-button
                    circle
                    round
                    plain
                    icon="el-icon-open"
                    type="success"
                    size="small"
                    @click="unfreezeEmployee(scope.row)"
                ></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
          style="margin-top:10px;"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryMap.pageNum"
          :page-sizes="[6, 10, 20, 30]"
          :page-size="queryMap.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>

      <!-- 添加/编辑员工对话框 -->
      <el-dialog
          :title="dialogTitle"
          :visible.sync="dialogVisible"
          width="800px"
          :before-close="handleClose"
          class="p2-style"
      >
        <el-form
            :model="employeeForm"
            ref="employeeForm"
            label-width="120px"
            class="form-container"
        >
          <el-row>
            <el-col :span="11">
              <!-- 员工姓名输入 -->
              <el-form-item
                  label="员工姓名"
                  prop="employeeName"
                  :rules="[{ required: true, message: '请输入员工姓名', trigger: 'blur' }]"
              >
                <el-input v-model="employeeForm.employeeName" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="1">
              <!-- 员工账号输入 -->
              <el-form-item
                  label="员工账号"
                  prop="account"
                  :rules="[{ required: true, message: '请输入员工账号', trigger: 'blur' }]"
              >
                <el-input v-model="employeeForm.account" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <!-- 密码输入 -->
              <el-form-item
                  label="密码"
                  prop="password"
                  :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
              >
                <el-input
                    type="password"
                    v-model="employeeForm.password"
                    style="width: 100%;"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="1">
              <!-- 电话输入 -->
              <el-form-item
                  label="电话"
                  prop="phone"
                  :rules="[{ required: true, message: '请输入电话', trigger: 'blur' }]"
              >
                <el-input v-model="employeeForm.phone" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <!-- 邮箱输入 -->
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="employeeForm.email" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="1">
              <!-- 性别选择 -->
              <el-form-item label="性别" prop="gender">
                <el-select v-model="employeeForm.gender" placeholder="请选择性别" style="width: 100%;">
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <!-- 角色选择 -->
              <el-form-item
                  label="角色"
                  prop="role"
                  :rules="[{ required: true, message: '请选择角色', trigger: 'change' }]"
              >
                <el-select v-model="employeeForm.role" placeholder="请选择角色" style="width: 100%;">
                  <el-option
                      v-for="role in roles"
                      :key="role.value"
                      :label="role.label"
                      :value="role.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="1">
              <!-- 所属部门输入 -->
              <el-form-item
                  label="所属部门"
                  prop="department"
                  :rules="[{ required: true, message: '请输入所属部门', trigger: 'blur' }]"
              >
                <el-input v-model="employeeForm.department" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <!-- 岗位输入 -->
              <el-form-item
                  label="岗位"
                  prop="position"
                  :rules="[{ required: true, message: '请输入岗位', trigger: 'blur' }]"
              >
                <el-input v-model="employeeForm.position" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <!-- 取消按钮 -->
          <el-button @click="dialogVisible = false">取消</el-button>
          <!-- 保存按钮 -->
          <el-button type="primary" @click="saveEmployee">保存</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      dialogVisible: false, // 控制对话框显示
      dialogTitle: "添加员工", // 对话框标题
      employeeData: [], // 员工数据列表
      roles: [
        { label: "管理员", value: "管理员" },
        { label: "普通员工", value: "普通员工" },
        // 其他角色
      ], // 角色列表
      multipleSelection: [], // 选中的员工
      total: 0, // 总员工数
      queryMap: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页大小
        employeeName: "", // 员工姓名查询条件
        gender: "", // 性别查询条件
        role: "", // 角色查询条件
        department: "", // 所属部门查询条件
        position: "", // 岗位查询条件
      }, // 查询参数
      employeeForm: {
        employeeId: "", // 员工ID
        employeeName: "", // 员工姓名
        account: "", // 员工账号
        password: "", // 密码
        confirmPassword: "", // 确认密码
        phone: "", // 电话
        email: "", // 邮箱
        gender: "", // 性别
        role: "", // 角色
        department: "", // 所属部门
        position: "", // 岗位
      }, // 员工表单数据
      showMoreConditions: false, // 是否显示高级搜索条件
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      console.log("返回上一页");
    },
    // 获取员工列表
    async getEmployeeList() {

    },
    // 删除选中员工
    deleteSelected() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning("请选择要删除的员工");
        return;
      }
      this.$confirm("确定要删除选中的员工吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            // 删除逻辑
            this.$message.success("删除成功");
            this.getEmployeeList();
          })
          .catch(() => {
            // 取消删除
          });
    },
    // 打开添加员工对话框
    openAddDialog() {
      this.dialogTitle = "添加员工";
      this.employeeForm = {
        employeeId: "",
        employeeName: "",
        account: "",
        password: "",
        confirmPassword: "",
        phone: "",
        email: "",
        gender: "",
        role: "",
        department: "",
        position: "",
      };
      this.dialogVisible = true;
    },
    // 打开编辑员工对话框
    openEditDialog(employee) {
      this.dialogTitle = "编辑员工";
      this.employeeForm = { ...employee };
      this.dialogVisible = true;
    },
    // 处理分页大小变化
    handleSizeChange(newSize) {
      this.queryMap.pageSize = newSize;
      this.getEmployeeList();
    },
    // 处理当前页变化
    handleCurrentChange(current) {
      this.queryMap.pageNum = current;
      this.getEmployeeList();
    },
    // 处理对话框关闭事件
    handleClose(done) {
      this.dialogVisible = false;
      done();
    },
    // 重置查询条件
    resetForm() {
      this.queryMap = {
        pageNum: 1,
        pageSize: 10,
        employeeName: "",
        gender: "",
        role: "",
        department: "",
        position: "",
      };
      this.getEmployeeList();
    },
    // 执行查询
    search() {
      this.queryMap.pageNum = 1;
      this.getEmployeeList();
    },
    // 重置按钮事件
    reset() {
      this.queryMap = {
        pageNum: 1,
        pageSize: 10,
        customerName: "",
        userNickname: "",
        username: "",
        phoneNumber: "",
        department: "",
        role: "",
        status: "",
      };
      this.getUserList();
    },
    // 处理选择变化
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 冻结员工
    freezeEmployee(employee) {
      // 冻结逻辑
      this.$message.success("员工已冻结");
    },
    // 删除单个员工
    deleteEmployee(employee) {
      // 删除逻辑
      this.$message.success("员工已删除");
      this.getEmployeeList();
    },
    // 解冻员工
    unfreezeEmployee(employee) {
      // 解冻逻辑
      this.$message.success("员工已解冻");
    },
    // 保存员工
    saveEmployee() {
      // 保存逻辑
      this.$message.success("保存成功");
      this.dialogVisible = false;
      this.getEmployeeList();
    },
  },
  created() {
    this.getEmployeeList();
  },
};
</script>

<style scoped>
.hint {
  margin-left: 2vh;
  font-weight: 400;
  font-size: 12px;
  color: red;
}

.query-condition {
  display: flex;
  align-items: center;
}

</style>